<script>
import config from '../config'

export default {
  name: "ActivityItem",
  data() {
    return {
      cdn: config.cdn
    }
  },
  props: {
    activity: {
      type: Object,
      default: {}
    }
  }
}
</script>

<template>
<li class="item activity-item">
  <a :href="activity.link" target="_blank" class="activity-image">
    <img :src="`${cdn}/${activity.cover}-0.6`" >
  </a>
  <div class="content">
    <h2 class="activity-title"><a :href="activity.link" target="_blank">{{ activity.name }}</a></h2>
    <p>{{ activity.summary }}</p>
    <p class="time">
      <label class="activity-label" v-if="!activity.expire">进行中</label>
      <label class="activity-label" v-if="activity.expire" style="background: #959595; color: #F8F7F8;">已结束</label>
      &nbsp;&nbsp;活动时间至&nbsp;{{ activity.endDate }}&nbsp;结束</p>
  </div>
</li>
</template>

<style>
.activity-item {
  position: relative;
  border: 0;
}

.activity-item .activity-image {
  display: block;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.activity-item .activity-image > img {
  display: block;
  width: 100%;
  min-height: 100%;
}

.activity-item .content {
  padding: 15px 15px 5px 15px;
  border: 1px solid #E8E6E7;
  box-shadow: -1px 2px 1px #E9E9E9;
}

.activity-item .activity-title {
  font-size: 20px;
  margin: 0px;
}

.activity-item .activity-title > a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.activity-item .content p {
  margin-top: 5px;
}

.activity-item .time {
  position: relative;
  display: block;
  padding-top: 14px;
  height: 40px;
  line-height: 26px;
}

.activity-item .time:before {
  position: absolute;
  content: '';
  width: 100%;
  height: 2px;
  background-color: #F2F2F2;
  left: 0px;
  top: 0px;
}

.activity-item .activity-label {
  position: relative;
  display: inline-block;
  background-color: #63D5BB;
  padding: 3px 10px;
  padding-right: 20px;
  line-height: 14px;
  font-size: 10px !important;
}

.activity-item .activity-label:after {
  position: absolute;
  content: '';
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #fff;
  top: 0px;
  right: -1px; 
}
</style>
